<style lang="scss" scoped>
    @import '~src/css/university.scss';
    .classify-box{background: #fff;padding: 40px 0 500px 50px;}
    .always-box{width: 400px;height: 40px;line-height: 40px;background: $mcb;text-align: center;margin-top: 30px;border-radius: 4px;}
    .input-box{margin-top: 30px;}
    .input-box input{width: 400px;height: 38px;border:1px solid #d8dce5;border-radius: 4px;outline:none;text-align: center;}
    input[type=text]:focus {border: 1px solid $mco;}
    input[type=text]:disabled{background: #fff;}
    .input-box span{width: 40px;height: 40px;background: $mcb;text-align: center;line-height: 40px;font-size: 16px;display: inline-block;margin:0 4px;cursor: pointer;}
    .input-box div{width: 90px;height: 40px;background: $mcb;text-align: center;line-height: 40px;font-size: 16px;display: inline-block;margin:0 4px;cursor: pointer;}
    .plus-box{margin-top: 30px;width: 400px;height: 38px;border:1px solid #d8dce5;border-radius: 4px;text-align: center;line-height: 38px;cursor: pointer;}
    .plus-box:hover{background: $mcb;}
    .el-icon-plus{font-size: 18px;color: #999;font-weight: bold;}

    .no-resource{background: #fff;min-height: 500px;text-align: center;padding-top: 160px;}
    .no-word{color: #999;padding: 20px 0 26px;}

</style>

<template>
    <section>


        <div class="classify-box" v-if="list.length!=0">
            <p>添加的知识体系可以修改和删除，点击右侧“保存”按钮，修改内容才会生效</p>
            <template v-for="one in list">
                <div class="input-box">
                    <input ref="input" type="text" v-model="one.CateName" :disabled="!one.editFlag" v-focus @input="cutLength(one)">
                    <span v-show="!one.editFlag" @click="inEdit(one)"><img src="http://jhsy-img.caizhu.com/sass/images/icon-edit.png" alt=""></span>
                    <span v-show="one.editFlag" @click="edit(one)"><img src="http://jhsy-img.caizhu.com/sass/images/ic-save.png" alt=""></span>
                    <span @click="delTab(one)"><img src="http://jhsy-img.caizhu.com/sass/images/icon-del.png" alt=""></span>
                </div>
            </template>
            <div class="plus-box" @click="addTab"><i class="el-icon-plus"></i></div>
        </div>

        <div class="no-resource" v-if="list.length==0">
            <div><img src="http://jhsy-img.caizhu.com/sass/images/ic-default.png" alt=""></div>
            <p class="no-word">您还未添加知识体系，添加一个试试吧！</p>
            <div>
                <el-button type="primary" @click="addTab">添加知识体系</el-button>
            </div>
        </div>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            list:[],
            path:[
                {
                    'name':'设置',
                    'path':'/university/basic-settings'
                },
                {
                    'name':'知识体系'
                }
            ]
        }
    },
    mixins: [mixinMethods],
    methods: {
        cutLength(one){
            if(one.CateName.length>8){
                this.$message.error('最多输入8个字符');
                one.CateName = one.CateName.substring(0,8);
            }
        },
        getList(){
            axios.post('/com/info-cates/list', qs.stringify({})).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    d.data.InfoCateList.forEach(one=>{
                        one.editFlag = false;
                    });
                    this.list = d.data.InfoCateList;
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        inEdit(one){
            let editList = this.list.filter(item=>{
                return item.editFlag == true;
            });
            if(editList.length!=0){
                this.$message.error('请先保存上一个知识体系')
                return
            }else {
                one.editFlag=true
            }
        },
        edit(one){
            if(one.InfoCateID==''){
                axios.post('/com/info-cates/add', qs.stringify({
                    cateName:one.CateName
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.$message.success('添加成功');
                        this.getList();
                    }else {
                        this.$message.error(d.msg)
                    }
                })
            }else {
                axios.post('/com/info-cates/edit', qs.stringify({
                    infoCateID:one.InfoCateID,
                    cateName:one.CateName,
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.$message.success('编辑成功');
                        one.editFlag = false;
                    }else {
                        this.$message.error(d.msg)
                    }
                })
            }
        },
        addTab(){
            let nowLength = this.list.length;
            if(nowLength>0){
                if(this.list[nowLength-1].InfoCateID){
                    this.list.push({InfoCateID:'',CateName:'',editFlag:true});
                    this.$nextTick(()=>{
                        this.$refs.input[nowLength].focus()
                    })
                }else {
                    this.$message.error('请先保存添加的知识体系')
                }
            }else {
                this.list.push({InfoCateID:'',CateName:'',editFlag:true});
            }
        },
        delTab(one){
            this.$confirm('删除后数据不可恢复, 请再次确认是否要删除', '您确定要删除该知识体系吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(!one.InfoCateID){
                    this.list.pop();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }else {
                    axios.post('/com/info-cates/del', qs.stringify({
                        infoCateID:one.InfoCateID
                    })).then((res) => {
                        var d = res.data;
                        if(d.flag == 1){
                            this.getList();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message.error(d.msg)
                        }
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    },
    mounted: function(){
        this.getList();
        this.$store.commit('setPath', this.path)
    },
    directives: {
        focus: function (el) {
            el.focus()
        }
    },
}


</script>
